<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图区域 -->
    <el-card>
      <el-table :height="400" :data="tableData.filter(data => !search || data.article_class_name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
        <el-table-column type="index" label="ID"></el-table-column>
        <el-table-column label="分类名称" prop="article_class_name"></el-table-column>
        <el-table-column label="分类类型" prop="Types"></el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input v-model="search" size="mini" placeholder="输入分类名关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑分类对话框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="dialogVisible"
      width="50%"
      @close="ShutdownEvent">
      <el-form :model="ClassForm" :rules="ClassFormRules" ref="ClassFormRef" label-width="80px">
        <el-form-item label="分类名称" prop="article_class_name">
          <el-input v-model="ClassForm.article_class_name"></el-input>
        </el-form-item>
        <el-form-item label="分类类型">
          <el-input disabled v-model="ClassForm.Types"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ConfirmAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    // 获取分类列表
    this.GetClassList()
  },
  data () {
    return {
      // 所有分类列表数据
      tableData: [],
      // 保存搜索框的数据
      search: '',
      // 控制编辑分类对话框的显示和隐藏
      dialogVisible: false,
      // 保存要修改的分类数据
      ClassForm: {},
      // 分类表单验证规制
      ClassFormRules: {
        article_class_name: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async GetClassList () {
      // 发起获取分类列表请求
      const { data: ser } = await this.$http.get('getClassList')
      // 判读是否获取成功
      if (ser.status !== 200) return this.$message.error('获取分类列表失败!')
      // 把获取到的数据赋值给 tableData
      this.tableData = ser.result
    },
    // 监听编辑分类对话框的关闭事件
    ShutdownEvent () {
      // 当编辑分类对话框关闭重新获取数据
      this.GetClassList()
      // 重置表单
      this.$refs.ClassFormRef.resetFields()
    },
    // 点击确定按钮的处理函数
    ConfirmAdd () {
      // 表单预验证
      this.$refs.ClassFormRef.validate(async (valid) => {
        if (!valid) return false
        // 提示用户是否确定修改
        const confirmResult = await this.$confirm('此操作将修改该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 判断用户的操作
        if (confirmResult !== 'confirm') return this.$message.info('已取消修改该分类!')
        // 发起修改分类请求
        const { data: ser } = await this.$http.put('editingClass', this.ClassForm)
        // 判读是否修改成功
        if (ser.status !== 200) return this.$message.error('分类修改失败!')
        // 成功就重新获取数据
        this.GetClassList()
        // 提示用户修改成功
        this.$message.success('修改分类成功!')
        // 关闭对话框
        this.dialogVisible = false
      })
    },
    handleEdit (index, row) {
      this.ClassForm = row
      this.dialogVisible = true
    },
    async handleDelete (index, row) {
      // 提示用户是否确定修改
      const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 判断用户的操作
      if (confirmResult !== 'confirm') return this.$message.info('已取消删除该分类!')
      // 发起修改分类请求
      const { data: ser } = await this.$http.delete(`deleteClass/${row.article_class_id}`)
      // 判读是否修改成功
      if (ser.status !== 200) return this.$message.error('分类删除失败!')
      // 成功就重新获取数据
      this.GetClassList()
      // 提示用户修改成功
      this.$message.success('删除分类成功!')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
